<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易数据存储</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f0f2f5; color: #333; margin: 0; padding: 20px; }
        .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #1a73e8; }
        .form-section, .data-section { margin-bottom: 30px; }
        h2 { border-bottom: 2px solid #eee; padding-bottom: 10px; color: #444; }
        textarea { width: 100%; min-height: 100px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; box-sizing: border-box; resize: vertical; }
        button { display: block; width: 100%; padding: 12px; background-color: #1a73e8; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; }
        button:hover { background-color: #155ab6; }
        .data-item { background-color: #f9f9f9; padding: 15px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 15px; }
        .data-item p { margin: 0 0 10px 0; white-space: pre-wrap; word-wrap: break-word; }
        .data-item .meta { font-size: 12px; color: #777; text-align: right; }
    </style>
</head>
<body>
    <div class="container">
        <h1>简易数据存储</h1>

        <div class="form-section">
            <h2>(+) 添加新数据</h2>
            <form method="post" action="{% url 'data_list' %}">
                {% csrf_token %}  <!-- Django 安全措施，必须添加 -->
                <textarea name="content" placeholder="输入您想要保存的内容..." required></textarea>
                <br><br>
                <button type="submit">保存数据</button>
            </form>
        </div>

        <div class="data-section">
            <h2>(=) 已保存数据</h2>
            {% if items %}
                {% for item in items %}
                    <div class="data-item">
                        <p>{{ item.content }}</p>
                        <div class="meta">
                            保存于: {{ item.created_at|date:"Y-m-d H:i:s" }}
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <p>还没有任何数据，快添加一条吧！</p>
            {% endif %}
        </div>
    </div>
</body>
</html>